<template>
  <div class="app-container">
    <el-row>
      <el-col :span="16" :offset="4" class="slide-image">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in carouselList" :key="item.id" >
            <div class="img-detail" v-if="item.cover" @click="handleUpdate(item)" >
              <el-image :src="item.cover | filterImg" fit="cover" class="cover">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <h3 v-else @click="handleUpdate(item)">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>


    <el-dialog :visible.sync="updateDialogVisible" title="轮播图更新">

      <el-form ref="dataForm" :model="tempCarousel" label-position="right" label-width="70px"
               style="width: 100%; margin: auto;">
        <el-form-item label="目的地址" prop="title">
          <el-input v-model="tempCarousel.target"/>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload class="cover-uploader"
                     :action="baseUrl+`/upload/img`"
                     :show-file-list="false"
                     accept="image/*"
                     :on-success="handleUploadCoverSuccess"
                     :before-upload="beforeCoverUpload">
            <el-image v-if="tempCarousel.cover" :src="tempCarousel.cover | filterImg" fit="fill" alt=""
                      class=""></el-image>
            <i v-else class="el-icon-plus cover-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <!--        <el-form-item label="Imp">-->
        <!--          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3"-->
        <!--                   style="margin-top:8px;"/>-->
        <!--        </el-form-item>-->
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="updataCarousel">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {carouselList, updateCarousel} from "@/api/carousel";

export default {
  name: 'Table',
  data() {
    return {
      carouselList: [1, 2, 3, 4, 5, 6],
      tempCarousel: {
        id: '',
        cover: '',
        target: ''
      },
      updateDialogVisible: false
    }
  },
  computed: {
    baseUrl() {
      return process.env.VUE_APP_IMG_SERVER
    }
  },
  methods: {
    getCarouselList() {
      carouselList().then(response => {
        this.carouselList = response.data.data
      })
    },
    handleUpdate(data) {
      this.tempCarousel = Object.assign({}, data);
      this.updateDialogVisible = true
    },
    //图片上传成功回调钩子
    handleUploadCoverSuccess(res, file, fileList) {
      let data = res.data
      if (data.path) {
        this.tempCarousel.cover = data.path
      }
    },
    //图片上传失败回调钩子
    beforeCoverUpload(file) {

    },
    updataCarousel() {
      updateCarousel(this.tempCarousel).then(response => {
        if (response.data.code === 20000) {
          this.$notify({
            title: 'Success',
            message: 'Update Successfully',
            type: 'success',
            duration: 2000
          })
          this.updateDialogVisible = false
          this.getCarouselList()
        }
      })
    }
  },
  created() {
    this.getCarouselList()
  }
}
</script>

<style scoped>
>>> .el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: auto;
  text-align: center;
}

>>> .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

>>> .el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

>>>.slide-image .el-image {
  width: 100%;
  height: 300px;
}

.cover-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cover-uploader >>> .el-upload:hover {
  border-color: #409EFF;
}

.cover-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 240px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}

>>>.el-image.cover {
  width: 100%;
  height: 300px;
  display: block;
}

</style>
